<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter">
            <el-row>
                <el-col :span="18">
                    <el-form-item label="文章分类" prop="articleTypeId" size="mini">
                        <el-cascader
                            v-model="filter.cascaderPath"
                            :props="cascaderPathProps"
                            :show-all-levels="false"
                            clearable
                            @change="changeArticleType"></el-cascader>
                    </el-form-item>
                    <el-form-item label="文章标题" prop="title">
                        <el-input v-model="filter.title" placeholder="请输入条件查询"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="getPage()" icon="el-icon-search" type="primary">查询</el-button>
                        <el-button @click="resetFilter()" icon="el-icon-refresh-left">重置</el-button>
                        <el-button @click="showUpdate(0)" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <el-form-item style="margin-right:0px;">
                        <el-button @click="toArticleType()" icon="el-icon-folder" style="margin-bottom:10px;">分类管理</el-button>
                        <el-button @click="toRecommend()" icon="el-icon-s-flag">推荐管理</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column width="60" prop="id" label="ID"/>
                <el-table-column width="100" prop="articleTypeName" label="分类"/>
                <el-table-column prop="thumbnail" label="缩略图" width="73">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.thumbnail" fit="fit">
                            <div slot="error" class="image-slot"
                                 style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题"/>
                <!-- <el-table-column prop="summary" label="内容"/> -->
                <el-table-column prop="hits" label="浏览量" width="70"/>
                <el-table-column width="70" label="状态">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitch(scope.row.status,scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="updateName" label="更新人"/>
                <el-table-column width="160" prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">


                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row.id)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showRecommendType(scope.row.id)">
                            推荐
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-drawer
            title="推荐位管理"
            :visible.sync="recommendDrawerVisible"
            custom-class="demo-drawer"
            size="40%"
        >
            <div class="demo-drawer__content" style="padding: 10px;">
                <el-table :data="recommendTypeList" style="width: 100%">
                    <el-table-column prop="recommendTypeName" label="推荐位" width="180"></el-table-column>

                    <el-table-column label="是否推荐">
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.isRecommend"
                                @change="handleRecommendUpdate(scope.row.isRecommend,scope.row.id)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>
    </section>
</template>
<script>
import {ArticleApi} from '@/api/cms/Article'
import {ArticleTypeApi} from '@/api/cms/ArticleType'
import {ArticleRecommendTypeApi} from '@/api/cms/ArticleRecommendTypeApi'
import {ArticleRecommendApi} from '@/api/cms/ArticleRecommendApi'
import {AdApi} from "@/api/cms/Ad";

export default {
    name: 'CmsArticleList',
    components: {},
    props: ["typeId"],
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                title: '',
                articleTypeId: '',
                cascaderPath: []
            },
            loading: false,
            recommendDrawerVisible: false,
            recommendTypeList: [],
            recommendArticleId: 0,
            cascaderPathProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad(node, resolve) {
                    const {level, data} = node;
                    let parentId = level === 0 ? 0 : data.value
                    ArticleTypeApi.getListByParentId(parentId).then((response) => {
                        const nodes = Array.from(response, item => ({
                            value: item.id, //选中项绑定值
                            label: item.articleTypeName,//标签上显示文字
                            leaf: !item.hasChildren,//是否有子选项
                            type: 'classesType'//这是自己定义的 方便区分
                        }))
                        resolve(nodes);
                    })
                }
            },
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                title: this.filter.title,
                articleTypeId: this.filter.articleTypeId
            }

            this.loading = true
            ArticleApi.getPage(params).then((response) => {
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 删除数据
        handleDelete(id) {
            ArticleApi.delete(id).then((response) => {
                this.getPage()
            })
        },
        // 修改状态
        statusSwitch(val, id) {
            const params = {
                id: id,
                status: val
            }

            ArticleApi.edit(params).then((response) => {
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showUpdate(id) {
            let typeId = this.$props.typeId ? this.$props.typeId : 0
            this.$router.push('/cms/articleUpdate?id=' + id + '&typeId=' + typeId)
        },
        changeArticleType(e) {
            this.filter.articleTypeId = e[e.length - 1]
        },
        /**
         * 获取推荐类型
         * @param articleId
         */
        showRecommendType(articleId) {
            this.recommendArticleId = articleId
            this.recommendDrawerVisible = true
            ArticleRecommendTypeApi.getList(articleId).then(response => {
                this.recommendTypeList = response
            })
        },
        /**
         * 获取推荐类型
         * @param isRecommend
         * @param recommendTypeId
         */
        handleRecommendUpdate(isRecommend, recommendTypeId) {
            let dto = {
                "recommendTypeId": recommendTypeId,
                "articleId": this.recommendArticleId
            }
            if (isRecommend) {
                ArticleRecommendApi.add(dto).then(response => {
                })
            } else {
                ArticleRecommendApi.cancel(dto).then(response => {
                })
            }
        },
        toArticleType() {
            this.$router.push('/cms/articleType')
        },
        toRecommend() {
            this.$router.push('/cms/articleRecommendType')
        },
        resetFilter() {
            this.filter.cascaderPath=[]
            this.$refs['filterRef'].resetFields()
            this.getPage()
        },
    }
}

</script>

<style lang="scss" scoped></style>
